<template>
  <div class='message'>
    <header>
      消息中心
    </header>
    <van-tabs v-model="active"
              swipeable
              :animated=true>
      <!-- <van-tab v-for="(index,idx) in arr"
               :title="index"
               :key='idx'> -->
      <van-tab title="收件箱">
        <ul class='content1'>
          <li>
            <p>积分相关</p>
            <p>详细内容</p>
            <div class='bet'>
              <span>2017-12-12 12:11:12</span>
              <button>删除</button>
            </div>
          </li>
          <li>
            <p>积分相关</p>
            <p>详细内容</p>
            <div class='bet'>
              <span>2017-12-12 12:11:12</span>
              <button>删除</button>
            </div>
          </li>
        </ul>
      </van-tab>
      <van-tab title="发件箱">
        <ul class='content1'>
          <li>
            <p>积分相关</p>
            <p>详细内容</p>
            <div class='bet'>
              <span>2017-12-12 12:11:12</span>
              <button>删除</button>
            </div>
          </li>
          <li>
            <p>积分相关</p>
            <p>详细内容</p>
            <div class='bet'>
              <span>2017-12-12 12:11:12</span>
              <button>删除</button>
            </div>
          </li>
        </ul>
      </van-tab>
      <van-tab title="留言">
        <div class='content3'>
          <div class='title'>
            <span>标题 :</span>
            <input type="text"
                   placeholder="请填写消息标题">
          </div>
          <div class='txt'>
            <span>内容 :</span>
            <textarea name=""
                      id=""
                      cols="30"
                      rows="10"></textarea>
          </div>
          <div id='upload'>
            <span>附件 :</span>
            <img src="../../../static/index/tu-9.jpg"
                 alt=""
                 @click='showAction'>
          </div>
          <button class='sendBtn'>发送</button>
        </div>
      </van-tab>
      <!-- </van-tab> -->
    </van-tabs>
  </div>
</template>

<script>
export default {
  name: "message",
  data () {
    return {
      arr: ['收件箱', '发件箱', '留言'],
      active: 0,
    }
  },
  methods: {
    //api的上传图片
    showAction () {
      let _this = this
      api.actionSheet({
        title: '上传图片',
        cancelTitle: '取消',
        buttons: ['拍照', '从手机相册选择']
      }, function (ret, err) {
        if (ret) {
          _this.getPicture(ret.buttonIndex);
        }
      });
    },
    getPicture (sourceType) {
      var _this=this
      if (sourceType == 1) { // 拍照
        api.getPicture({
          sourceType: 'camera',
          encodingType: 'jpg',
          mediaValue: 'pic',
          allowEdit: false,
          destinationType: 'base64',
          quality: 100,
          targetWidth: 200,
          targetHeight: 200,
          saveToPhotoAlbum: true
        }, function (ret, err) {
          if (ret) {
            // api.showProgress({
            //   style: 'default',
            //   animationType: 'fade',
            //   text: '图片上传中...',
            //   modal: false
            // });
            // document.getElementById("img_src").src = ret.data; //图片链接
            // uploading(ret.data)
            var img = document.createElement('img')
            img.src = ret.base64Data //图片链接
            document.getElementById("upload").appendChild(img);
            _this.afterRead(ret.base64Data)
          }
        });
      } else if (sourceType == 2) { // 从相机中选择
        api.getPicture({
          sourceType: 'library',
          encodingType: 'jpg',
          mediaValue: 'pic',
          destinationType: 'base64',
          quality: 100,
          targetWidth: 200,
          targetHeight: 200
        }, function (ret, err) {
          if (ret && ret.data) {
            api.alert({
              msg: JSON.stringify(ret.data)
            });
            // api.showProgress({
            //     style: 'default',
            //     animationType: 'fade',
            //     text: '图片上传中...',
            //     modal: false
            // });
            var img = document.createElement('img')
            img.src = ret.base64Data //图片链接
            document.getElementById("upload").appendChild(img);
            _this.afterRead(ret.base64Data)
          }
        });
      } else {
        return;
      }
    },
    afterRead (content) {
      // 此时可以自行将文件上传至服务器
      var params = this.qs.stringify({
        img: content
      })
      // [{"path":"attachment/information/201908/b556cd55b07c28e608ab9c03bb61e07b.png","prepath":"attachment/information/201908/preb556cd55b07c28e608ab9c03bb61e07b.png","image_id":0}]
      this.$axios.post('user/appupload', params).then((res) => {
        let obj = res.data.data
        let myimg = {}
        myimg['path'] = obj.file
        myimg['prepath'] = obj.thumb
        myimg['image_id'] = this.imgId
        this.img.push(myimg)
        this.imgId = this.imgId += 1
      })
    },
  }
}
</script>

<style lang="scss" scoped>
@import "../../../static/css/message/message.scss";
</style>
<style  scoped>
header {
  background-color: #c30000;
  height: 90px;
  width: 100%;
  padding: 20px;
  display: flex;
  align-items: center;
  color: white;
  position: fixed;
  top: 0px;
  justify-content: center;
  z-index: 88;
}
.message >>> .van-tabs__wrap.van-hairline--top-bottom {
  position: fixed;
  top: 90px;
  width: 100%;
  z-index: 88;
}
.message >>> .van-tabs__content.van-tabs__content--animated {
  margin-top: 178px;
  border-top: 6px solid #f0f0f0;
}
</style>
